<template>
    <view class="page">
        <view class="content">
            <u-form labelPosition="left"
                    labelWidth="120"
                    :model="form"
                    ref="uForm">
                <u-form-item label="租金包含费用" prop="lease_priec" borderBottom @click="open1">
                    <u--input v-model="show1Text" disabled disabledColor="#ffffff" border="none" placeholder="请选择租金包含费用"/>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>

                <u-form-item label="家具清单" prop="lease_priec" borderBottom @click="open2">
                    <u--input v-model="show2Text" disabled disabledColor="#ffffff" border="none" placeholder="请填写家具清单"/>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>

                <u--text type="info" margin="15px 0 15px 0" text="合同照片(选填)"></u--text>
                <u-upload
                        :fileList="hetongImgList"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="hetong"
                        multiple
                        :maxCount="20"
                >
                </u-upload>

                <u--text type="info" margin="15px 0 15px 0" text="附加条款"></u--text>
                <view class="fwbtext">
                    <u--textarea v-model="remark" placeholder="请添加附加条款" border="none"></u--textarea>
                </view>
            </u-form>

            <!--popup 1-->
            <u-popup :show="show1" @close="close1" :closeable="true" closeIconPos="top-left" :closeOnClickOverlay="false">
                <text class="title">租金包含费用</text>
                <view class="content">
                    <scroll-view class="_scrolley" scroll-y>

                        <u-checkbox-group
                                v-model="cost"
                                iconPlacement="right"
                                placement="column">

                            <view v-for="(item,index) in locationList" :key="index">
                                <u-checkbox :label="item.name" :name="item.name" ></u-checkbox>
                                <u-line color="#303133" margin="20rpx 0 20px 0"></u-line>
                            </view>
                        </u-checkbox-group>

                    </scroll-view>
                    <u-gap height="5"></u-gap>
                    <u-button type="primary" text="选择完成" @click="nextHandler"></u-button>
                </view>
            </u-popup>

            <!--popup 2-->
            <u-popup :show="show2" @close="close2" :closeable="true" closeIconPos="top-left" :closeOnClickOverlay="false">
                <text class="title">家具清单</text>
                <view class="content">
                    <scroll-view class="_scrolley" scroll-y>
                        <view v-for="(item,index) in list2" :key="index">
                            <u-row justify="space-between">
                                <text> {{item.name}} </text>
                                <u-number-box v-model="list2[index].num" min="0" integer></u-number-box>
                            </u-row>
                            <u-line color="#303133" margin="20rpx 0 20px 0"></u-line>
                        </view>
                    </scroll-view>
                    <u-gap height="5"></u-gap>
                    <u-button type="primary" text="选择完成" @click="nextHandler2"></u-button>
                </view>
            </u-popup>


            <u-gap height="40"></u-gap>
            <u-row>
                <u-button type="primary" text="确定" @click="finishInput"></u-button>
            </u-row>
        </view>
        <view class="safe-area-inset-bottom"></view>
    </view>
</template>

<script>
    export default {
        name: "contract",
        data(){
            return {
                show1: false,
                show1Text: '',
                show2: false,
                show2Text: '',
                value: 1,
                hetongImgList:[],
                remark:'',
                locationList: [
                    {name:'水费'},
                    {name:'电费'},
                    {name:'煤气费'},
                    {name:'有线电视费'},
                    {name:'网络宽带费'},
                    {name:'物业管理费'},
                    {name:'室内设施维修费(人为使用不当除外)'},
                    {name:'保洁费'},
                    {name:'暖气费'},
                ],
                list2: [
                    {name: '餐桌', num: 0,type:1},
                    {name: '燃气灶', num: 0,type:1},
                    {name: '抽油烟机', num: 0,type:1},
                    {name: '冰箱', num: 0,type:1},
                    {name: '餐椅', num: 0,type:1},
                    {name: '沙发', num: 0,type:1},
                    {name: '洗衣机', num: 0,type:1},
                    {name: '烘干机', num: 0,type:1},
                    {name: '微波炉', num: 0,type:1},
                    {name: '热水器', num: 0,type:1},


                    {name: '单人床', num: 0,type:2},
                    {name: '双人床', num: 0,type:2},
                    {name: '台灯', num: 0,type:2},
                    {name: '床垫', num: 0,type:2},
                    {name: '床头柜', num: 0,type:2},
                    {name: '衣柜', num: 0,type:2},
                    {name: '矮柜', num: 0,type:2},
                    {name: '茶几', num: 0,type:2},
                    {name: '斗柜', num: 0,type:2},
                    {name: '吊橱', num: 0,type:2},
                    {name: '空调', num: 0,type:2},
                    {name: '电视', num: 0,type:2},
                    {name: '遥控器', num: 0,type:2},
                    {name: '电视柜', num: 0,type:2},
                    {name: '沙发', num: 0,type:2},
                    {name: '桌子', num: 0,type:2},
                    {name: '椅子', num: 0,type:2},
                    {name: '窗帘', num: 0,type:2},
                    {name: '台灯', num: 0,type:2},
                    {name: '吊灯', num: 0,type:2},
                    {name: '壁灯', num: 0,type:2},
                    {name: '沙发床', num: 0,type:2},
                    {name: '梳妆台', num: 0,type:2},
                    {name: '化妆椅', num: 0,type:2},
                    {name: '鞋柜', num: 0,type:2},
                    {name: '机顶盒', num: 0,type:2},
                ],

                cost:[],
                facilities:[]
            };
        },
        methods:{
            open1(){
                this.show1 = true;
            },
            close1() {
                this.show1 = false;
            },
            nextHandler(){
                if (this.cost.length > 0) {
                    this.show1Text = this.cost.length + '项';
                }

                this.close1();
            },

            open2(){
                this.show2 = true;
            },
            close2() {
                this.show2 = false;
            },
            nextHandler2(){
                let count = 0;
                for (let i = 0; i < this.list2.length; i++) {
                    if (this.list2[i].num > 0) {
                        this.facilities.push({name: this.list2[i].name, num: this.list2[i].num,type: this.list2[i].type});
                        count++;
                    }
                }
                this.show2Text = count + '项';
                this.close2();
            },

            // 删除图片
            deletePic(event) {
                this[`${event.name}ImgList`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`${event.name}ImgList`].length
                lists.map((item) => {
                    this[`${event.name}ImgList`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`${event.name}ImgList`][fileListLen]
                    this[`${event.name}ImgList`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                let server = this.$url + '/api.php/index/file_update';
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: server,
                        filePath: url,
                        name: 'image[]',
                        success: (res) => {
                            let resp = JSON.parse(res.data);
                            setTimeout(() => {
                                resolve(resp.data.img_url[0]);
                            }, 1000)
                        }
                    });
                })
            },

            finishInput(){
                uni.$emit('updateMore',{
                    cost: this.cost,
                    facilities: this.facilities,
                    contract_img: this.hetongImgList.map(function (item) {
                        return item.url;
                    }),
                    clause: this.remark,
                });
                uni.navigateBack({delta: 1});
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: #ffffff;
    }

    .content{
        padding: 20rpx;
    }

    .title{
        font-size: 36rpx;
        margin: 20rpx auto;
    }

    .uni-list-cell {
        justify-content: space-around;
    }

    ._scrolley{
        width: 100%;
        height: 70vh;
    }
</style>